footer {
  width: 100%;
  background-color: #f5f5f5;
  margin-top: 20px;
  
}
.service {
  display: flex;
  justify-content: space-around;
  padding: 30px 0;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
/*
精灵图:sprites(雪碧图)。把多个小的图标或图片
放在一个图片文件中（.png），使用时通过坐标获取
目的：为了减少请求次数，从而达到网站性能优化的目标
注意：精灵图只能以背景图的形式区加载
 精灵图是一个整合了很多个小背景图标的大背景图。
  作用：是为了有效减少服务器接收和发送请求的次数，提高页面的加载速度。
  精灵图也称作CSS sprites、CSS雪碧等。
  用法：与遮罩有些类似，通过移动大背景图的位置来显示目标小背景图。

  需要测量的两个数值：
    小图标的宽和高；
    小图标距离大图片左上角的x轴和y轴的值。
    （其中x轴是大图片上边框，y轴是大图片的左边框）
*/

.service li span {
  width: 50px;
  height: 50px;
  display: block;
  margin-right: 3px;
  background-image: url(../images/icons.png);
}
.service li:nth-child(1) span {
  background-position: -253px -3px;
}
.service li:nth-child(2) span {
  background-position: -255px -54px;
}
.service li:nth-child(3) span {
  background-position: -257px -106px;
}
.service li:nth-child(4) span {
  background-position: -258px -157px;
}
.service li:nth-child(5) span {
  background-position: -257px -209px;
}
.service h3,
.service p {
  font-size: 14px;
  font-weight: normal;
  color: #666;
  line-height: 25px;
}
.help {
  text-align: center;
  display: flex;
  justify-content: space-around;
  padding: 25px 0 10px;
  border-bottom: 1px solid #ccc;
}
.help dt {
  color: #666;
  font-size: 16px;
  line-height: 30px;
}
.help dd {
  line-height: 25px;
}
.help dd:hover a {
  color: #999;
}
.link-addr{
  padding-bottom: 25px 0 10px;
  text-align: center;
 
}
.link{
  line-height: 40px;
}
.link li{
  display: inline-block;
  margin-right: 10px;
  position: relative;
 
}
.link li:not(:first-child):after{
    content: '';
    display: block;
    width: 1px;
    height: 13px;
    border-right: 1px solid #333; 
    position: absolute;
    left: -9px;
    top: 14px;
}
.link li:hover a{
  color: #999;
}
.addr-coyright{
    color: #ccc;
}